$sidebar-breakpoint: 720px;

body.has-sidebar,
body.try-hab {
  background: $hab-off-white;

  #content-outer {
    margin-bottom: rem-calc(90);
  }
}

#content-outer {
  @include small-nav {
    padding-top: $header-height-mobile + 90;
  }

  &.has-sticky-nav {
    padding-top: $header-height;
  }
}

.container {
  @include grid-column-row(0);
  background-color: $white;
}

.container__has-sidebar {
  position: relative;
  max-width: rem-calc(1200);
  margin: 0 auto;
  min-height: 675px;
  max-height: auto;

  hr {
    border-bottom-color: lighten($hab-gray, 20%);
  }
}

.main-sidebar {
  @include grid-column(12);
  padding: rem-calc(40) rem-calc(20);
  background: $hab-off-white;

  a {
    display: block;
    position: relative;
    padding-right: rem-calc(15);
    color: $body-font-color;

    &:hover,
    &:active,
    &:focus {
      color: $hab-primary;
    }

    span {
      position: absolute;
      right: 2px;
      top: -2px;
    }
  }

  .is-active > a {
    font-weight: bold;
    color: $hab-primary;

    &:before {
      content: "";
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: rem-calc(12);
      height: rem-calc(12);
      background: url('/images/icons/sidebar-active.png') no-repeat;
      background-size: 100% auto;
    }
  }

  @include breakpoint(medium) {
    @include grid-column(3);
    padding: rem-calc(40) 0;
  }
}

.main-sidebar--search {
  margin-bottom: rem-calc(30);
}

.main-sidebar--list {
  margin-bottom: rem-calc(30);
}

.main-sidebar--list--item--dropdown {
  margin-top: rem-calc(10);
  padding-left: rem-calc(10);
}

.main-sidebar--list--item {
  display: block;
  line-height: rem-calc(24);
  margin-bottom: rem-calc(8);
  padding-left: 0;
}

.main-content__has-sidebar {
  @include grid-column(12);
  background-color: $hab-white;
  background: url("/images/graphics/article-watermark.png") no-repeat right bottom $hab-white;
  background: url("/images/graphics/article-watermark.svg") no-repeat right bottom $hab-white;
  height: 100%;
  min-height: 70vh;
  padding: rem-calc(30) rem-calc(20) rem-calc(90);

  @include breakpoint(medium) {
    @include grid-column(9);
    padding: rem-calc(40) rem-calc(30) rem-calc(120) !important;
  }
}
